<template>
  <div class="login_page">
    <div class="login_container">
      <div class="swiper">
        <img src="http://localhost:8000/static/img/login_logo.155eeb2c.svg" alt="">
        <h3>技术库项目资源管理系统</h3>
        <p>CTOKU resource management</p>
      </div>
      <div class="login_from">
        <blockquote>用户登录 | USERLOGIN</blockquote>
        <div class="h-input h-input-prefix-icon">
          <input type="text" placeholder="请输入登录账号" autocomplete="off" :readonly="loading" v-model="account"/>
          <i class="h-icon-user"></i>
        </div>
        <div class="h-input h-input-prefix-icon">
          <input type="password" placeholder="请输入登录密码" :readonly="loading" v-model="password"/>
          <i class="h-icon-task"></i>
        </div>
        <div class="other c_f">
           <!-- <div class="save_acttount"><Checkbox v-model="saveAccount">是否记住登录账号</Checkbox></div> -->
           <div class="fogetpassword" @click="openForgetTips" >忘记密码？</div>
        </div>
        <div class="login_btn">
          <button class="h-btn h-btn-primary h-btn-l" :class="{'h-btn-loading':loading}" :loading="true" @click="Login">
            <i class="h-icon-loading" v-if="loading"></i>
            登&nbsp;&nbsp;&nbsp;&nbsp;录
          </button>
        </div>
        <!-- <div class="other_login">
          <h4>第三方登录</h4>
          <div class="other_login_type c_f">
            <div class="login_item">
              <i class="fa fa-wechat"></i>
            </div>
            <div class="login_item">
              <i class="fa fa-github"></i>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      saveAccount: 1,
      account: '',
      password: ''
    }
  },
  methods: {
    Login () {
      // this.$router.push('/dashboard')
      if (!this.account) {
        this.$Message.error('请输入登录账户')
      } else if (!this.password) {
        this.$Message.error('请输入登录密码')
      } else {
        this.loading = !this.loading
        return new Promise((resolve, reject) => {
          this.$Axios({ url: 'login', method: 'post', data: {account: this.account, password: this.password} })
            .then(resp => {
              // 请求成功
              this.loading = !this.loading
              if (resp.code === 0) {
                this.$Message.error(resp.msg)
              } else {
                sessionStorage.setItem('token', resp.data.token)
                this.$router.push('/dashboard')
                this.$Message.success(resp.msg)
              }
              resolve(resp)
            })
            .catch(error => {
              // 请求失败
              this.$_requestInterceptor('error', error)
              reject(error)
            })
        })
      }
    },
    openForgetTips () {
      this.$Modal({
        title: '忘记密码怎么办？',
        middle: true,
        width: 300,
        content: '该系统暂时不支持用户自助找回密码，请联系系统管理员设置密码！'
      })
    }
  }
}
</script>

<style>

</style>
